<!-- 组件说明 -->
<template>
  <div id='detail'>
    <detail-nav-bar/>
    <van-swipe class="banner-swipe" :autoplay="3000" v-if="goodsInfo">
      <van-swipe-item v-for="(banner,index) in goodsInfo.bannerlist" :key="index">
        <img :src="banner" >
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import DetailNavBar from './detailComps/DetailNavBar'
  import {getDetail, Goods} from 'network/detail'
   import {
 
    Swipe,
    SwipeItem,
  } from 'vant';


  export default {
    name: 'Detail',
    components: {
      DetailNavBar,

      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
    },
    data () {
      return {
        goodsId: null,
        goodsInfo: null
      };
    },
    computed: {

    },
    methods: {
      getDetail(id) {
        getDetail(id).then(res => {
          this.goodsInfo = new Goods(res)
        })
      }
    },
    created() {
      console.log('created')
      this.goodsId = this.$route.params.id
      console.log('goodsId' + this.goodsId)
      this.getDetail(this.goodsId)
    },
    activated() {
      // this.goodsId = this.$route.params.id
      // console.log('goodsId' + this.goodsId)
    }
  }
</script>

<style  scoped>
  .banner-swipe {
    height: 300px;
  }

  /* 不设置的话，会看到底部的导航栏 */
  #detail {
    background-color: #fff;
    position: relative;
    z-index: 9;
    height: 100vh;
  }

</style>